import React, { Component } from "react";
import MainLayout from "@component/mainLayout/mainLayout";
import { InterfaceG } from "@config/Config";
import "./index.scss";
import yhTools from "@tools/yh";
import { Button, Toast, InputItem } from "antd-mobile";

class UnBaindBank extends Component {
	constructor(props) {
		super(props);
		this.timer = null;
		this.state = {
			codeNumber: "",
			countDown: 60, //倒计时默认60
			isClick: true, //是否可以点击
			bankId: null,
			mobile: null,
			aloneUnbind: false //是否允许解绑 ：false-允许/true/不允许
		};
	}
	componentDidMount() {
		let id = yhTools.getUrlParam("id");
		let phone = yhTools.getUrlParam("mobile");
		this.setState({
			bankId: id,
			mobile: phone
		});
		this.handleSendCode();
	}
	//开始倒计时
	start = () => {
		this.setState({
			isClick: false
		});
		this.timer = setInterval(() => {
			this.setState(
				{
					countDown: this.state.countDown - 1
				},
				() => {
					this.judgeEnd(this.state.countDown);
				}
			);
		}, 1000);
	};
	/**
	 * 判断是否停止
	 */
	judgeEnd = countDown => {
		if (countDown <= 0) {
			clearInterval(this.timer);
			this.timer = null;
			this.setState({
				isClick: true,
				countDown: 60
			});

			return;
		}
	};
	componentWillUnmount() {
		clearInterval(this.timer);
		this.timer = null;
	}
	setCountDown = countDown => {
		this.setState({
			countDown
		});
	};
	/**
	 * 发送验证码
	 */
	handleSendCode = () => {
		let bankId = yhTools.getUrlParam("id");
		let phone = yhTools.getUrlParam("mobile");
		if (this.state.isClick) Toast.loading("发送中...", 3);
		let objs = {
			url: InterfaceG.bankManageSendCode,
			params: {
				id: bankId,
				channelCode: "05",
				mobilePhone: phone
			},
			_alertShow: false
		};
		yhTools.request(objs).then(res => {
			Toast.hide();
			if (res.code === "0") {
				Toast.info("发送成功", 2);
				this.start();
			} else {
				Toast.info(res.message, 2);
			}
		});
	};
	handleChangeValue = value => {
		this.setState({
			codeNumber: value
		});
	};
	/**
	 * 确认解绑
	 */
	handleConfirmUnbind = () => {
		if (this.checkValue()) {
			let objs = {
				//url: InterfaceG.bankManageConfirmUnbind,
				url: InterfaceG.unbindCard,
				params: {
					id: this.state.bankId,
					channelCode: "05",
					verifyCode: this.state.codeNumber
				},
				_alertShow: false
			};
			Toast.loading("解绑中...", 10);
			yhTools.request(objs).then(res => {
				Toast.hide();
				if (res.code === "0") {
					Toast.success("解绑成功", 3);
					setTimeout(() => {
						this.props.history.go(-2);
					}, 3000);
				} else if (res.code == "1") {
					this.setState({
						aloneUnbind: true
					});
				} else {
					Toast.info(res.message, 2);
				}
			});
		}
	};

	checkValue() {
		if (!this.state.codeNumber) {
			Toast.info("请输入验证码", 2);
			return false;
		}
		return true;
	}
	render() {
		const { countDown, mobile, aloneUnbind } = this.state;
		const _pageParams = {
			header: {
				title: ""
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		return (
			<MainLayout pageParams={_pageParams}>
				<div className="un-bind-bank">
					<p className="un-bind-bank-tille">请输入验证码</p>
					<p className="un-bind-bank-phone">验证码已发送至手机+86 {mobile}</p>
					<InputItem
						type="number"
						maxLength={6}
						placeholder="验证码"
						style={{ textAlign: "center   " }}
						value={this.state.codeNumber}
						onChange={this.handleChangeValue}
					/>
					{aloneUnbind && (
						<p className="canot-unbind">
							此卡已关联相关业务，暂不能解绑，如有疑问请联系客服
						</p>
					)}
					<div className="send-code-but" onClick={this.handleSendCode}>
						{!this.state.isClick && (
							<div>
								<span className="send-code-but-count">{countDown}S</span>
								<span className="send-code-but-til">后重新发送</span>
							</div>
						)}
						{this.state.isClick && (
							<div>
								<span className="send-code-but-til">重新发送</span>
							</div>
						)}
					</div>
					<Button className="unbound_btn" onClick={this.handleConfirmUnbind}>
						确认解绑
					</Button>
				</div>
			</MainLayout>
		);
	}
}

export default UnBaindBank;
